<template>
	<div class="layout-padding">
		<splitpanes>
			<pane size="15">
				<div class="layout-padding-auto layout-padding-view">
					<el-scrollbar>
						<query-tree placeholder="请输入关键字" :query="queryList" :show-expand="true" @node-click="handleNodeClick">
							<template #default="{ node, data }">
								<span v-if="!data.isLock">{{ node.label }}</span>
							</template>
						</query-tree>
					</el-scrollbar>
				</div>
			</pane>
			<pane class="ml8">
				<div class="layout-padding-auto layout-padding-view">
					<el-row v-show="showSearch">
						<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
							<el-form-item label="日期:" prop="date">
								<el-input v-model="state.queryForm.date" placeholder="请选择" clearable />
							</el-form-item>
							<el-form-item label="电压类别:" prop="type">
								<el-input v-model="state.queryForm.type" placeholder="请选择" clearable />
							</el-form-item>
							<el-form-item>
								<el-button icon="Search" type="primary" @click="getDataList">查询</el-button>
								<el-button icon="Refresh" @click="resetQuery">重置</el-button>
								<el-button icon="Download" type="primary" @click="">导出</el-button>
							</el-form-item>
						</el-form>
					</el-row>
					<el-table
						v-loading="state.loading"
						:data="state.dataList"
						row-key="userId"
						border
						:cell-style="tableStyle.cellStyle"
						:header-cell-style="tableStyle.headerCellStyle"
					>
						<el-table-column label="回路名称" prop="name1" />
						<el-table-column label="参数名称" prop="name2" show-overflow-tooltip />
						<el-table-column label="总用电" prop="name3" show-overflow-tooltip />
					</el-table>
				</div>
			</pane>
		</splitpanes>
	</div>
</template>

<script lang="ts" setup>
import { BasicTableProps, useTable } from '/@/hooks/table';

// 定义表格查询、后台调用的API
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		date: '',
		type: '',
	},
});
const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);
const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'));
const queryList = ref([]);
const showSearch = ref(true);
</script>
